<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>邮件发送客户端视图</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <!--视图块-->
            <div class="container-fluid card">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--检索栏-->
                        <form class="form-inline search-bar" id="pageForm">
                            <div class="form-group">
                                <label class="control-label">自增主键：&nbsp;</label>
                                <input type="text" name="id" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">邮箱标识：&nbsp;</label>
                                <input type="text" name="senderCode" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">邮箱Host：&nbsp;</label>
                                <input type="text" name="mailHost" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">邮箱账号：&nbsp;</label>
                                <input type="text" name="username" class="form-control">
                            </div>
                            <div class="form-group">
                                <label class="control-label">状态：&nbsp;</label>
                                <select name="state" class="form-control">
                                    <option value=""></option>
                                    <option value="10">启用</option>
                                    <option value="20">禁用</option>
                                </select>
                            </div>

                            <button type="button" class="btn btn-primary" onclick="joView.select()"> <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</button>
                        </form>
                        <!--/检索栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--按钮栏-->
                        <div class="form-group button-bar">
                            <button isShow="" type="button" class="btn btn-primary" onclick="joView.add()">
                                <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
                            </button>
<!--                            <button type="button" class="btn btn-danger" onclick="joView.del()">-->
<!--                                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除-->
<!--                            </button>-->
                            <button type="button" class="btn btn-warning" onclick="window.location.reload()">
                                <i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;刷新
                            </button>
                            <span class="font-red">
                                默认邮箱请将标识配置为'default'
                            </span>
                        </div>
                        <!--/按钮栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="table-bar">
                            <!--grid-->
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="mainList" dataUrl="/msg/mailSender/getPage" deleteUrl="/msg/mailSender/delete" formUrl="/page/msg/mailSenderForm.html">
<!--                                    <col field="id" title="ID" width="15%" align="" />-->
                                    <col field="senderCode" title="账号唯一标识" width="15%" align=""/>
                                    <col field="fromName" title="发件人名称" width="15%" align="" />
                                    <col field="mailHost" title="邮箱Host" width="15%" align=""  />
                                    <col field="username" title="邮箱账号" width="15%" align=""  />
<!--                                    <col field="protocol" title="协议" width="15%" align=""  />-->
                                    <col field="state" title="状态" width="10%" align="" />
                                    <col field="dataSequence" title="排序" width="10%" align="" order="dataSequence" />
                                    <col field="[=jo.formatTime('{updateTime}')]" title="更新时间" width="12%" align=""  order="updateTime"/>
                                    <col field="_opt" title="操作" width="15%" align=""/>
                                </table>
                            </div>
                            <!--/grid-->

                            <!--分页条-->
                            <div class="page-bar" gridId="mainList">

                            </div>
                            <!--/分页条-->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    layui.laydate.render({
        elem: '#createTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#createTime2' //注册日期控件
    });
    layui.laydate.render({
        elem: '#updateTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#updateTime2' //注册日期控件
    });
    $(function(){
        joView.init({grid:$("#mainList"),PKName:"id",checkStyle:'order'});//初始化页面
    });
    //表格渲染时行处理,参数1为当前行的数据对象,参数2为当前行的索引值(最小为0)
    joView.handleItem = function(oItem,iIndex){
        if (oItem.state == 10) {
            oItem.state = htmlWrap4Label('启用', 'label-primary');
        } else if (oItem.state == 20) {
            oItem.state = htmlWrap4Label('禁用', 'label-warning');
        }

        oItem._opt = '';
        oItem._opt += htmlWrap4Button({val: '删除', class: 'btn-xs btn-danger', icon: 'fa-trash-o', click: 'joView.del('+oItem.id+')'});
        oItem._opt += '&nbsp;';
        oItem._opt += htmlWrap4Button({val: '编辑', class: 'btn-xs btn-info', icon: 'fa-pencil-square', click: 'joView.edit('+oItem.id+')'});
        oItem._opt += '&nbsp;';
        oItem._opt += htmlWrap4Button({val: '发邮件', class: 'btn-xs btn-success', icon: 'fa-envelope-open-o', click: 'sendMail("'+oItem.senderCode+'")'});
    };
    //表格渲染完成后的回调,参数为表格数据(数组对象)
    joView.setGridDataAfter = function(oList){

    };
    /* 关于joView更多回调函数和配置参数可查看jo-page-view.js */

    function sendMail(code) {
        var _html = '<div class="padding-15" style="line-height: 25px;">' +
            '<span class="font-red">* </span>收件人：<input type="text" id="win_receiver" class="form-control" autocomplete="off" placeholder="收件人邮箱: 例如xxx@qq.com"/>' +
            '<span class="font-red">* </span>标题：<input type="text" id="win_title" class="form-control" autocomplete="off"/>' +
            '<span class="font-red">* </span>内容：<textarea rows="6" id="win_content" class="form-control" autocomplete="off"></textarea>' +
            '</div>';
        jo.showDialog(_html, 'sendMail', true, {
            area: ['650px','450px']
            , title: '发送邮件'
            , btn: ['发送', '取消']
            , btn1: function (idx) {
                var receiver = $('#win_receiver').val();
                var title = $('#win_title').val();
                var content = $('#win_content').val();
                if (!receiver) {
                    jo.showErrorMsg('请输入收件人邮箱!');
                    return;
                }
                if (!title) {
                    jo.showErrorMsg('请输入邮件标题!');
                    return;
                }
                if (!content) {
                    jo.showErrorMsg('请输入邮件内容!');
                    return;
                }
                var param = {
                    senderCode: code,
                    receiver: receiver,
                    title: title,
                    content: content
                };
                jo.confirm('您确定要发送嘛?', function (idx2) {
                    jo.postAjax('/msg/mail/sendMail', param, function (json) {
                        if (json.code == 0) {
                            jo.showSuccessMsg('发送成功~');
                        } else {
                            jo.showErrorMsg(jo.getDefVal(json.info, '发送失败~'));
                        }
                    }, true);
                    jo.close(idx2);
                    jo.close(idx);
                });
            }
        });
    }
</script>
</body>
</html>
